<!DOCTYPE html>
<html>
	<head>
		<title>"Find" API</title>
		<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
		<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../common/samples.css">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class='header_comment'>"Find" API</div>
		<div class='sample_comment'>Type something in the input ( part of some film's title )</div>
		<div id="testA"></div>
		<style type="text/css">
			.webix_cell.marker{
				background:#ffd;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
		webix.ready(function(){

			webix.ui({
				container:"testA",
				rows:[
					{ view:"text", label:"Find", labelAlign:"right",
						on:{
							onTimedKeyPress:function(){
								var value = this.getValue().toLowerCase();
								var table = $$("dt1");

								var res = table.find(function(obj){
									return obj.title.toLowerCase().indexOf(value) != -1;
								});

								table.clearCss("marker", true)
								for (var i = 0; i < res.length; i++)
									table.addCss(res[i].id, "marker", true);
								table.refresh();
							}
						}
					},
					{
						view:"datatable", id:"dt1",
						columns:[
							{ id:"rank",	header:"", css:"rank",  		width:50,	sort:"int"},
							{ id:"title",	header:"Film title", width:200,	sort:"string"},
							{ id:"year",	header:"Released" , width:80,	sort:"int",tooltip: ""},
							{ id:"votes",	header:"Votes", 	width:100,	sort:"int"}
						],
						autoheight:true,
						autowidth:true,
						data:small_film_set
					}
				]
			});

		});
		</script>
	</body>
</html>